@spacer: 16px;
@spacerList: 0, @spacer * 0.25, @spacer * 0.5, @spacer, @spacer * 1.5, @spacer * 3;

// 外边距
.generate-margins(5);
.generate-margins(@n, @i: 0) when (@i =< @n) {
  .mt-@{i} {
    margin-top: extract(@spacerList, @i + 1);
  }
  .mb-@{i} {
    margin-bottom: extract(@spacerList, @i + 1);
  }
  .ml-@{i} {
    margin-left: extract(@spacerList, @i + 1);
  }
  .mr-@{i} {
    margin-right: extract(@spacerList, @i + 1);
  }
  .mx-@{i} {
    margin-left: extract(@spacerList, @i + 1);
    margin-right: extract(@spacerList, @i + 1);
  }
  .my-@{i} {
    margin-top: extract(@spacerList, @i + 1);
    margin-bottom: extract(@spacerList, @i + 1);
  }
  .ma-@{i} {
    margin: extract(@spacerList, @i + 1);
  }
  .generate-margins(@n, (@i + 1));
}
.mx-auto {
  margin: 0 auto;
}

// 内边距
.generate-padding(5);
.generate-padding(@n, @i: 0) when (@i =< @n) {
  .pt-@{i} {
    padding-top: extract(@spacerList, @i + 1);
  }
  .pb-@{i} {
    padding-bottom: extract(@spacerList, @i + 1);
  }
  .pl-@{i} {
    padding-left: extract(@spacerList, @i + 1);
  }
  .pr-@{i} {
    padding-right: extract(@spacerList, @i + 1);
  }
  .px-@{i} {
    padding-left: extract(@spacerList, @i + 1);
    padding-right: extract(@spacerList, @i + 1);
  }
  .py-@{i} {
    padding-top: extract(@spacerList, @i + 1);
    padding-bottom: extract(@spacerList, @i + 1);
  }
  .pa-@{i} {
    padding: extract(@spacerList, @i + 1);
  }
  .generate-padding(@n, (@i + 1));
}

// 边框
@borderColor: #dddee1;
@borderSize: 0px, 1px;
.generate-border(1);
.generate-border(@n, @i: 0) when (@i =< @n) {
  .bt-@{i} {
    border-top: extract(@borderSize, @i + 1) solid @borderColor;
  }
  .bb-@{i} {
    border-bottom: extract(@borderSize, @i + 1) solid @borderColor;
  }
  .bl-@{i} {
    border-left: extract(@borderSize, @i + 1) solid @borderColor;
  }
  .br-@{i} {
    border-right: extract(@borderSize, @i + 1) solid @borderColor;
  }
  .bx-@{i} {
    border-left: extract(@borderSize, @i + 1) solid @borderColor;
    border-right: extract(@borderSize, @i + 1) solid @borderColor;
  }
  .by-@{i} {
    border-top: extract(@borderSize, @i + 1) solid @borderColor;
    border-bottom: extract(@borderSize, @i + 1) solid @borderColor;
  }
  .ba-@{i} {
    border: extract(@borderSize, @i + 1) solid @borderColor;
  }
  .generate-border(@n, (@i + 1));
}
.radius-normal {
  border-radius: 10px;
}

// 字体对齐
.tx-l {
  text-align: left;
}
.tx-c {
  text-align: center;
}
.tx-r {
  text-align: right;
}

// 颜色
@black: #000;
@white: #fff;
@themeColor: #00a36e;
.color-theme {
  color: @themeColor;
}
.color-white {
  color: @white;
}
.color-black {
  color: @black;
}
.color-error {
  color: #ed3f14;
}
.color-success {
  color: #19be6b;
}
.color-warn {
  color: #ff9900;
}
.color-info {
  color: #2d8cf0;
}
.color-link {
  color: #5cadff;
}
.color-title {
  color: fade(@black, 85%);
}
.color-text {
  color: fade(@black, 65%);
}
.color-help {
  color: fade(@black, 45%);
}
.color-disabled {
  color: fade(@black, 25%);
}
.color-title-light {
  color: fade(@white, 100%);
}
.color-text-light {
  color: fade(@white, 85%);
}
.color-help-light {
  color: fade(@white, 65%);
}
.color-disabled-light {
  color: fade(@white, 45%);
}

// 背景
.bg-white {
  background-color: @white;
}
.bg-gray {
  background-color: fade(@black, 10%);
}

// 页面
.full-height {
  height: 100%;
}
.full-width {
  width: 100%;
}
.absolute-header:before {
  content: ' ';
  background-color: @themeColor;
  color: @themeColor;
  width: 100vw;
  display: block;
  height: 20px;
}
.absolute-header {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}
.absolute-floor {
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 100;
}

// 字体大小、字重
.text-bold {
  font-weight: bold;
}
.is-size-8 {
  font-size: 0.9em;
}

// Flex布局
.row {
  display: flex;
  align-items: center;
  &.fd {
    &-r {
      flex-direction: row;
    }
    &-rr {
      flex-direction: row-reverse;
    }
    &-c {
      flex-direction: column;
    }
    &-cr {
      flex-direction: column-reverse;
    }
  }
  &.fw {
    &-n {
      flex-wrap: nowrap;
    }
    &-w {
      flex-wrap: wrap;
    }
    &-wr {
      flex-wrap: wrap-reverse;
    }
  }
  &.jc {
    &-fs {
      justify-content: flex-start;
    }
    &-fe {
      justify-content: flex-end;
    }
    &-c {
      justify-content: center;
    }
    &-sb {
      justify-content: space-between;
    }
    &-sa {
      justify-content: space-around;
    }
  }
  &.ai {
    &-fs {
      align-items: flex-start;
    }
    &-fe {
      align-items: flex-end;
    }
    &-c {
      align-items: center;
    }
    &-b {
      align-items: baseline;
    }
    &-s {
      align-items: stretch;
    }
  }
  &.ac {
    &-fs {
      align-content: flex-start;
    }
    &-fe {
      align-content: flex-end;
    }
    &-c {
      align-content: center;
    }
    &-sb {
      align-content: space-between;
    }
    &-sa {
      align-content: space-around;
    }
    &-s {
      align-content: stretch;
    }
  }
}
.col {
  flex: 1;
  &.as {
    &-a {
      align-self: auto;
    }
    &-fs {
      align-self: flex-start;
    }
    &-fe {
      align-self: flex-end;
    }
    &-c {
      align-self: center;
    }
    &-b {
      align-self: baseline;
    }
    &-s {
      align-self: stretch;
    }
  }
}

